<template>
    <div class="operate">
        <el-button type="primary" @click="onAdd">新增</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label"
            :width="item.width" show-overflow-tooltip>
            <template #default="scope">
                <span v-if="item.prop === 'parentId'">{{ getLabel(scope.row[item.prop], parentIdOption) }}</span>
                <span v-else-if="item.prop === 'level'">{{ getLabel(scope.row[item.prop], levelOption) }}</span>
                <span v-else-if="item.prop === 'navStatus'">{{ getLabel(scope.row[item.prop], navStatusOption) }}</span>
                <span v-else-if="item.prop === 'showStatus'">{{ getLabel(scope.row[item.prop], showStatusOption) }}</span>
                <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="150">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="onShow(scope.row)">查看</el-button>
                <el-button link type="primary" size="small" @click="onEdit(scope.row)">编辑</el-button>
                <el-button link type="primary" size="small" @click="onDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="page">
        <el-pagination v-model:current-page="current" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="fetchData"
            @current-change="fetchData" />
    </div>
    <el-dialog v-model="dialogVisible" :title="title" width="800px" @close="onClose(formRef)">
        <el-descriptions v-if="showData" :column="1">
            <el-descriptions-item v-for="item in tableColumn" :key="item.prop" :label="item.label">
                <span v-if="item.prop === 'parentId'">{{ getLabel(form[item.prop], parentIdOption) }}</span>
                <span v-else-if="item.prop === 'level'">{{ getLabel(form[item.prop], levelOption) }}</span>
                <span v-else-if="item.prop === 'navStatus'">{{ getLabel(form[item.prop], navStatusOption) }}</span>
                <span v-else-if="item.prop === 'showStatus'">{{ getLabel(form[item.prop], showStatusOption) }}</span>
                <span v-else>{{ form[item.prop] }}</span>
            </el-descriptions-item>
        </el-descriptions>
        <el-form v-else ref="formRef" :model="form" :rules="rules" label-width="140px" class="demo-ruleForm" status-icon>
            <el-form-item label="产品编号" prop="id">
                <el-input v-model="form.id" />
            </el-form-item>
            <el-form-item label="上机分类的编号" prop="parentId">
                <el-select v-model="form.parentId" placeholder="请选择">
                    <el-option v-for="item in parentIdOption" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="产品名称" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="分类级别" prop="level">
                <el-select v-model="form.level" placeholder="请选择">
                    <el-option v-for="item in levelOption" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="产品数量" prop="productCount">
                <el-input v-model="form.productCount" />
            </el-form-item>
            <el-form-item label="产品单位" prop="productUnit">
                <el-input v-model="form.productUnit" />
            </el-form-item>
            <el-form-item label="是否显示在导航栏" prop="navStatus">
                <el-select v-model="form.navStatus" placeholder="请选择">
                    <el-option v-for="item in navStatusOption" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="显示状态" prop="showStatus">
                <el-select v-model="form.showStatus" placeholder="请选择">
                    <el-option v-for="item in showStatusOption" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="产品分类" prop="sort">
                <el-input v-model="form.sort" />
            </el-form-item>
            <el-form-item label="图标" prop="icon">
                <el-input v-model="form.icon" />
            </el-form-item>
            <el-form-item label="关键字" prop="keywords">
                <el-input v-model="form.keywords" />
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="form.description" type="textarea" :rows="2" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span v-if="!showData" class="dialog-footer">
                <el-button type="primary" @click="onSubmit(formRef)">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from "vue"
import { ElNotification, ElMessageBox } from 'element-plus'
import { pmsCouponPage, pmsCouponAdd, pmsCouponEdit, pmsCouponDelId, pmsCouponOne } from "../../http/pms_product_category.js"


const showData = ref(false)
const dialogVisible = ref(false)
const title = ref('')
const current = ref(1)
const size = ref(10)
const total = ref(0)
const tableData = ref([])
const form = ref({
    "description": "",
    "icon": "",
    "id": 0,
    "keywords": "",
    "level": 0,
    "name": "",
    "navStatus": 0,
    "parentId": 0,
    "productCount": 0,
    "productUnit": "",
    "showStatus": 0,
    "sort": 0
})
const formRef = ref()
const rules = ref({
    id: [
        { required: true, message: '请输入产品编号', trigger: ['blur'] }
    ],
    parentId: [
        { required: true, message: '请选择上机分类的编号', trigger: ['blur'] }
    ],
    name: [
        { required: true, message: '请输入产品名称', trigger: ['blur'] }
    ],
    level: [
        { required: true, message: '请选择分类级别', trigger: ['blur'] }
    ],
    productCount: [
        { required: true, message: '请输入产品数量', trigger: ['blur'] }
    ],
    productUnit: [
        { required: true, message: '请输入产品单位', trigger: ['blur'] }
    ],
    navStatus: [
        { required: true, message: '请选择是否显示在导航栏', trigger: ['blur'] }
    ],
    showStatus: [
        { required: true, message: '请选择显示状态', trigger: ['blur'] }
    ],
    sort: [
        { required: true, message: '请输入产品分类', trigger: ['blur'] }
    ],
    icon: [
        { required: true, message: '请输入图标', trigger: ['blur'] }
    ],
    keywords: [
        { required: true, message: '请输入关键字', trigger: ['blur'] }
    ],
    description: [
        { required: true, message: '请描述', trigger: ['blur'] }
    ]
})
const tableColumn = [
    {
        label: '产品编号',
        prop: 'id',
        width: 100
    },
    {
        label: '上机分类的编号',
        prop: 'parentId',
        width: 130
    },
    {
        label: '产品名称',
        prop: 'name',
        width: 120
    },
    {
        label: '分类级别',
        prop: 'level',
        width: 100
    },
    {
        label: '产品数量',
        prop: 'productCount',
        width: 100
    },
    {
        label: '产品单位',
        prop: 'productUnit',
        width: 120
    },
    {
        label: '是否显示在导航栏',
        prop: 'navStatus',
        width: 140
    },
    {
        label: '显示状态',
        prop: 'showStatus',
        width: 100
    },
    {
        label: '产品分类',
        prop: 'sort',
        width: 100
    },
    {
        label: '图标',
        prop: 'icon',
        width: 120
    },
    {
        label: '关键字',
        prop: 'keywords',
        width: 100
    },
    {
        label: '描述',
        prop: 'description',
        width: 100
    }
]
const parentIdOption = [
    {
        label: '一级分类',
        value: 0
    },
    {
        label: '二级分类',
        value: 1
    }
]
const levelOption = [
    {
        label: '1级',
        value: 0
    },
    {
        label: '2级',
        value: 1
    }
]
const navStatusOption = [
    {
        label: '不显示',
        value: 0
    },
    {
        label: '显示',
        value: 1
    }
]
const showStatusOption = [
    {
        label: '不显示',
        value: 0
    },
    {
        label: '显示',
        value: 1
    }
]
onMounted(() => {
    fetchData()
})

// 加载列表
const fetchData = async () => {
    const response = await pmsCouponPage({
        current: current.value,
        size: size.value
    })
    if (response) {
        tableData.value = response.data.page.records || []
        total.value = response.data.page.total
    }
}

// 根据值获取文本
const getLabel = (value, options) => {
    const result = options.filter(item => {
        return item.value == value
    })
    return result.length > 0 ? result[0]['label'] : ''
}

// 关闭弹框
const onClose = (formEl) => {
    form.value = {
        "description": "",
        "icon": "",
        "id": 0,
        "keywords": "",
        "level": 0,
        "name": "",
        "navStatus": 0,
        "parentId": 0,
        "productCount": 0,
        "productUnit": "",
        "showStatus": 0,
        "sort": 0
    }

    // fetchData()
}






// 新增产品
const onAdd = () => {
    title.value = '新增产品'
    showData.value = false
    dialogVisible.value = true
}

// 查看产品详情
const onShow = async (row) => {
    title.value = '查看产品'
    const response = await pmsCouponOne(row.id)
    if (response) {
        form.value = response.data.help
        showData.value = true
        dialogVisible.value = true
    }
}

// 编辑产品
const onEdit = async (row) => {
    title.value = '编辑产品'
    const response = await pmsCouponOne(row.id)
    if (response) {
        form.value = response.data.help
        showData.value = false
        dialogVisible.value = true
    }
}

// 删除产品
const onDelete = (row) => {
    ElMessageBox.confirm(
        '是否要删除产品?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const response = await pmsCouponDelId(row.id)
            if (response) {
                ElNotification({
                    title: 'Success',
                    message: '删除成功',
                    type: 'success',
                })
                await fetchData()
            }
        })
}

// 提交
const onSubmit = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            if (form.value.id) {
                const response = await pmsCouponEdit(form.value)
                if (response) {
                    ElNotification({
                        title: 'Success',
                        message: '编辑成功',
                        type: 'success',
                    })
                    formEl.resetFields()
                    dialogVisible.value = false
                    await fetchData()
                }
            } else {
                const response = await pmsCouponAdd(form.value)
                if (response) {
                    ElNotification({
                        title: 'Success',
                        message: '新增成功',
                        type: 'success',
                    })
                    formEl.resetFields()
                    dialogVisible.value = false
                    await fetchData()
                }
            }
            showData.value = false
        }
    })
}

</script>
  
<style>
.operate {
    margin-bottom: 10px;
}

.page {
    margin-top: 10px;
}
</style>
  